<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="Responsive Bootstrap 4 Admin &amp; Dashboard Template">
	<meta name="author" content="Bootlab">

	<title> demo_客户_资产_单据_query</title>

	<link href="css/classic.css" rel="stylesheet">

	<link href="css/ext.css" rel="stylesheet">


</head>

<body>
	<div class="wrapper">

		<nav class="sidebar">
			<div class="sidebar-content ">
				<a class="sidebar-brand" href="index.html">
					<i class="align-middle" data-feather="command"></i>
					<span class="align-middle">供应链金融平台</span>
				</a>

				<ul id='sidebar-menu' class="sidebar-nav">
					<script id="script_menu" type="text/x-handlebars-template">

							{{#each menuitems}}
								<li class="sidebar-header">
									{{title}}
								</li>
								{{#if groups}}
									{{#each groups}}
										<li class="sidebar-item" {{#if ../actived }} active {{/if}}>

											<a href="{{href}}" data-toggle="collapse" class="sidebar-link 	{{#if this.actived}} {{else}} collapsed {{/if}}">
												<i class="align-middle" data-feather={{icon}}></i> <span class="align-middle">{{title}}</span>
											</a>

											{{#if items}}
												<ul id="{{id}}" class="sidebar-dropdown list-unstyled collapse  	{{#if this.actived}} show {{else}} {{/if}}">
													{{#each items}}

														<li class="sidebar-item {{#if actived}} active {{/if}}">
															<a class="sidebar-link " href={{href}}>{{title}}</a>
														</li>
													{{/each}}
												</ul>
											{{/if}}
										</li>
									{{/each}}
								{{/if}}
							{{/each}}
						</script>
				</ul>

				<div class="sidebar-bottom d-none d-lg-block">
					<div class="media">
						<img class="rounded-circle mr-3" src="img/avatar.jpg" alt="Chris Wood" width="40" height="40">
						<div class="media-body">
							<h5 class="mb-1 text-white">Chris Wood</h5>
							<div class="text-light">
								<i class="fas fa-circle text-success"></i> Online
							</div>
						</div>
					</div>
				</div>

			</div>
		</nav>

		<div class="main">
			<nav class="navbar navbar-expand navbar-light bg-white">
				<a class="sidebar-toggle d-flex mr-2">
					<i class="hamburger align-self-center"></i>
				</a>

				<form class="form-inline d-none d-sm-inline-block">
					<input class="form-control form-control-no-border mr-sm-2" type="text"
						placeholder="Search projects..." aria-label="Search">
				</form>


				<div class="navbar-collapse collapse">
					<ul class="navbar-nav ml-auto">
						<li class="nav-item dropdown">
							<a class="nav-icon dropdown-toggle" href="#" id="messagesDropdown" data-toggle="dropdown">
								<div class="position-relative">
									<i class="align-middle" data-feather="message-circle"></i>
									<span class="indicator">4</span>
								</div>
							</a>
							<div id="messages" class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0"
								aria-labelledby="messagesDropdown">
								<script id="script_messages" type="text/x-handlebars-template">
										<div class="dropdown-menu-header">
									<div class="position-relative">
											{{total}}  New Messages
									</div>
								</div>
								<div class="list-group">
									{{#each items}}
									<a href="#" class="list-group-item">
										<div class="row no-gutters align-items-center">
											<div class="col-2">

												<img src="{{avatar}}" class="avatar img-fluid rounded-circle" alt="{{who}}">
											</div>
											<div class="col-10 pl-2">
												<div class="text-dark">{{who}}</div>
												<div class="text-muted small mt-1">{{content}}</div>
												<div class="text-muted small mt-1">{{time}}</div>
											</div>
										</div>
									</a>
								 	{{/each}}
								</div>
								<div class="dropdown-menu-footer">
									<a href="#" class="text-muted">Show all messages</a>
								</div>
								</script>
							</div>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-icon dropdown-toggle" href="#" id="alertsDropdown" data-toggle="dropdown">
								<div class="position-relative">
									<i class="align-middle" data-feather="bell-off"></i>
								</div>
							</a>
							<div id="alerts" class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0"
								aria-labelledby="alertsDropdown">
								<script id="script_alerts" type="text/x-handlebars-template">
										<div class="dropdown-menu-header">
									{{total}} New Notifications
								</div>
								<div class="list-group">
									{{#each items}}
										<a href="#" class="list-group-item">
										<div class="row no-gutters align-items-center">
											<div class="col-2">
													<i class="text-danger" data-feather="alert-circle"></i>
											</div>
											<div class="col-10">
												<div class="text-dark">{{title}}</div>
												<div class="text-muted small mt-1">{{content}}</div>
												<div class="text-muted small mt-1">{{time}}</div>
											</div>
										</div>
									</a>
									{{/each}}
								</div>
								<div class="dropdown-menu-footer">
									<a href="#" class="text-muted">Show all notifications</a>
								</div>
								</script>
							</div>
						</li>
						<li class="nav-item dropdown">
							<a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown">
								<span class="d-inline-block d-md-none">
									<i class="align-middle" data-feather="settings"></i>
								</span>
								<span class="d-none d-sm-inline-block">
									<img src="img/avatar.jpg" class="avatar img-fluid rounded-circle mr-1"
										alt="Chris Wood" /> <span class="text-dark">Chris Wood</span>
								</span>
							</a>
							<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
								<a class="dropdown-item" href="#"><i class="align-middle mr-1" data-feather="user"></i>
									Profile</a>
								<a class="dropdown-item" href="#"><i class="align-middle mr-1"
										data-feather="pie-chart"></i> Analytics</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="#">Settings & Privacy</a>
								<a class="dropdown-item" href="#">Help</a>
								<a class="dropdown-item" href="#">Sign out</a>
							</div>
						</li>
					</ul>
				</div>
			</nav>

			<main class="content">
				<div class="container-fluid p-0">
					<div class="row">
						<div class="col-md-12 col-xl-12">
							<div class="card">
								<div class="card-header">

									<h5 class="card-title mb-0">查询</h5>
								</div>
								<div class="card-body">
									<form>
										<div class="form-row">
											<div class="form-group col-md-4">
												<label for="inputFirstName">项目编号</label>
												<input type="text" class="form-control" id="inputFirstName" disabled
													placeholder="项目1">
											</div>
											<div class="form-group col-md-4">
												<label for="inputLastName">协议编号</label>
												<input type="text" class="form-control" id="inputLastName" disabled
													placeholder="协议1">
											</div>
											<div class="form-group col-md-4">
												<label for="inputLastName">平台方</label>
												<input type="text" class="form-control" id="inputLastName"
													placeholder="融资人">
											</div>
										</div>

										<div class="form-row">

											<div class="form-group col-md-4">
												<label for="inputCity">单据已纳入的资产</label>
												<select id="inputState" class="form-control">
													<option selected>ASSET0001</option>
													<option>...</option>
												</select>
											</div>
											<div class="form-group col-md-4">
												<label class="form-label">日期选择</label>
												<input class="form-control" type="text" name="daterange"
													value="01/01/2018 - 01/15/2018" />
											</div>
											<div class="form-group col-md-4">
												<label for="inputState">状态</label>
												<select id="inputState" class="form-control">
													<option selected>有效</option>
													<option>...</option>
												</select>
											</div>

										</div>
										<button type="submit" class="btn btn-primary">查询</button>
									</form>
									<script>
										document.addEventListener("DOMContentLoaded", function (event) {
											// Select2
											$('.select2').each(function () {
												$(this)
													.wrap('<div class="position-relative"></div>')
													.select2({
														placeholder: 'Select value',
														dropdownParent: $(this).parent()
													});
											})
											// Daterangepicker
											$('input[name="daterange"]').daterangepicker({
												opens: 'left'
											});
											$('input[name="datetimes"]').daterangepicker({
												timePicker: true,
												opens: 'left',
												startDate: moment().startOf('hour'),
												endDate: moment().startOf('hour').add(32, 'hour'),
												locale: {
													format: 'M/DD hh:mm A'
												}
											});
											$('input[name="datesingle"]').daterangepicker({
												singleDatePicker: true,
												showDropdowns: true
											});
											var start = moment().subtract(29, 'days');
											var end = moment();

											function cb(start, end) {
												$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
											}
											$('#reportrange').daterangepicker({
												startDate: start,
												endDate: end,
												ranges: {
													'Today': [moment(), moment()],
													'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
													'Last 7 Days': [moment().subtract(6, 'days'), moment()],
													'Last 30 Days': [moment().subtract(29, 'days'), moment()],
													'This Month': [moment().startOf('month'), moment().endOf('month')],
													'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
												}
											}, cb);
											cb(start, end);
										});
									</script>

								</div>
							</div>
							<div class="card">
								<div class="card-header mb-2">
									<div class="card-actions float-right">
										<div class="btn-group">
											<button type="button" class="btn btn-primary dropdown-toggle"
												data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
												操作
											</button>
											<div class="dropdown-menu">
												<a class="dropdown-item" href="">增加单据</a>
												<a class="dropdown-item" href="#">批量增加单据</a>

											</div>
										</div>
									</div>
									<h5 class="card-title">单据</h5>
									<h6 class="card-subtitle text-muted"></h6>
								</div>
								<div class="card-body">
									<table class="table row-border" id="debit_evidence">
										<thead>
											<tr>
												<th style="width:5%">单据号码</th>
												<th style="width:8%">单据类型</th>
												<th style="width:8%">票面金额</th>
												<th style="width:8%">销方</th>
												<th style="width:8%">购方</th>
												<th style="width:8%">认定资产金额</th>
												<th style="width:8%">剩余金额</th>
												<th class="d-none d-md-table-cell" style="width:8%">是否纳入资产</th>
												<th class="d-none d-md-table-cell" style="width:8%">资产编号</th>
												<th class="d-none d-md-table-cell" style="width:8%">开具日期</th>
												<th class="d-none d-md-table-cell" style="width:10%">付款日期</th>
												<th style="width:5%">单据状态</th>
												<th>详情</th>
											</tr>
										</thead>

									</table>
								</div>
								<script>
									document.addEventListener("DOMContentLoaded", function () {


										// 定义的数组,根据数组,渲染生成页面内容
										var arr = [
											['1110123123', '发票', 18123, '瑞康', '医院1', 123, 18123, '', '', '2020-01-01', '2020-08-01', '有效', ''],
											['1110123124', '发票', 1813, '瑞康', '医院1', 180, 1813, '是', 'ASSET001', '2020-01-01', '2020-08-01', '有效', ''],
											['1110123125', '发票', 18500, '瑞康', '医院1', 1800, 18500, '是', 'ASSET001', '2020-01-01', '2020-08-01', '红冲撤销', ''],
											['1110123126', '发票', 17000, '瑞康', '医院1', 7999, 7000, '是', 'ASSET001', '2020-01-01', '2020-08-01', '有效', ''],
											['1110123126', '发票', 12000, '瑞康', '医院2', 1199, 12000, '', '', '2020-01-01', '2020-08-01', '无效', ''],
											['1110123126', '发票', 18000, '瑞康', '医院2', 1999, 18000, '', '', '2020-01-01', '2020-08-01', '有效', ''],
											['1110123126', '发票', 18000, '瑞康', '医院2', 1999, 18000, '', '', '2020-01-01', '2020-08-01', '有效', ''],
											['1110123126', '发票', 18000, '瑞康', '医院2', 2999, 18000, '是', 'ASSET001', '2020-01-01', '2020-08-01', '有效', ''],
											['1110123126', '发票', 18000, '瑞康', '医院2', 1999, 18000, '是', 'ASSET001', '2020-01-01', '2020-08-01', '有效', ''],
											['1110123126', '发票', 18000, '瑞康', '医院2', 1999, 18000, '是', 'ASSET001', '2020-01-01', '2020-08-01', '有效', ''],
											['1110123126', '发票', 18000, '瑞康', '医院2', 1999, 18000, '是', 'ASSET001', '2020-01-01', '2020-08-01', '有效', ''],
											['1110123126', '发票', 18000, '瑞康', '医院2', 1999, 18000, '是', 'ASSET001', '2020-01-01', '2020-08-01', '有效', '']
										];

										var sum_evidence = arr.reduce(function (total, cur, index, array) {
											console.log(cur)
											total += cur[2]
											return total
										}, 0)
										var sum_evidence_asset_value = arr.reduce(function (total, cur, index, array) {
											console.log(cur)
											total += cur[5]
											return total
										}, 0)


										// 定义变量,存储要写入的内容
										$('#debit_evidence').DataTable({
											data: arr,
											      "bAutoWidth": false,
											"order": [
												[4, "desc"]
											],
											"infoCallback": function (settings, start, end, max, total, pre) {
												var api = this.api();
												var pageInfo = api.page.info();

												return `<span class='mr-1'>发票票面金额合计:</span><span class="  badge badge-primary ">${sum_evidence}</span> 元 <span class='mr-1'>认定资产金额合计:</span><span class="  badge badge-primary ">${sum_evidence_asset_value}</span> 元`
											},
											columns: [{
												// title: "单据号码"
											},
											{
												// title: "单据类型"
											},
											{
												// title: "单据票面金额"
												className: 'dt-body-right',
												render: function (data, type, row) {
													return '￥' + data;
												}
											},
											{
												// title: "单据-销售方"
											},
											{


											},
											{
												className: 'dt-body-right',
												render: function (data, type, row) {
													return '￥' + data;
												}
											},
											{

												className: 'dt-body-right',
												render: function (data, type, row) {
													return '￥' + data;
												}
											},
											{
												className: 'dt-body-right'
											},
											{

											},
											{

											},
											{

											},
											{

											},
											{
												title: "详情",
												render: function (data, type, row, meta) {

													return type === 'display' ?
														`<td class="table-action"><a href="#" data-toggle="modal"
											data-target="#centeredModalSuccess"><i class="align-middle mr-1" data-feather="delete"></i></a>/<a href="demo_凭证_单据_发票_detail.html"><i class="align-middle" data-feather="eye"></i></a></td>` :
														''
												}
											}
											]
										});

									});
								</script>
							</div>
							<div class="modal fade" id="centeredModalSuccess" tabindex="-1" role="dialog" aria-hidden="true">
								<div class="modal-dialog modal-dialog-centered" role="document">
									<div class="modal-content">
										<div class="modal-header">
											<h5 class="modal-title">提示框</h5>
											<button type="button" class="close" data-dismiss="modal" aria-label="Close">
												<span aria-hidden="true">&times;</span>
											</button>
										</div>
										<div class="modal-body m-3">
											<p class="mb-0">确认删除此单据</p>
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
											<button type="button" class="btn btn-success">确认
											</button>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>

				</div>
			</main>

			<footer class="footer">
				<div class="container-fluid">
					<div class="row text-muted">
						<div class="col-6 text-left">
							<ul class="list-inline">
								<li class="list-inline-item">
									<a class="text-muted" href="#">Support</a>
								</li>
								<li class="list-inline-item">
									<a class="text-muted" href="#">Help Center</a>
								</li>
								<li class="list-inline-item">
									<a class="text-muted" href="#">Privacy</a>
								</li>
								<li class="list-inline-item">
									<a class="text-muted" href="#">Terms of Service</a>
								</li>
							</ul>
						</div>
						<div class="col-6 text-right">
							<p class="mb-0">
								&copy; 2018 - <a href="index.html" class="text-muted">AppStack</a>
							</p>
						</div>
					</div>
				</div>
			</footer>
		</div>

	</div>
	<script src="js/app.js"></script>

	<script src="js/libs/initDataTables.js"></script>
	<script src="js/libs/handlebars/handlebars.min-v4.7.7.js"></script>
	<script src="js/initMenuMessageAlert.js"></script>

	<script type="text/javascript">
		document.addEventListener("DOMContentLoaded", function () {

			initSidebarMenu(2, 1, 0)

			var tpl_siderbar = $("#script_menu").html();
			var template_sdb = Handlebars.compile(tpl_siderbar);
			var content = template_sdb(menu_json_data);
			$("#sidebar-menu").html(content)

			//模版渲染
			var tpl_alerts = $("#script_alerts").html();
			var template_alt = Handlebars.compile(tpl_alerts);
			var content = template_alt(alerts);
			$("#alerts").html(content)



			//模版渲染
			var tpl_messages = $("#script_messages").html();
			var template_msg = Handlebars.compile(tpl_messages);
			var content = template_msg(messages);
			$("#messages").html(content)



		});
	</script>


	<script type="text/javascript">
		document.addEventListener("DOMContentLoaded", function () {
			//获取模版里面的内容
			var tpl = $("#entry1").html();

			//模版渲染
			var template = Handlebars.compile(tpl);

			//定义数据
			var json_data_arr = [
				['1110123123', 18123, 18123, '正常', '2020-01-01', '2020-06-01', ''],
				['1110123124', 1813, 78, '正常', '2020-01-01', '2020-07-01', ''],
				['1110123125', 1811, 811, '逾期', '2020-01-01', '2020-04-01', ''],
				['1110123126', 17123, 17123, '正常', '2020-01-01', '2020-09-01', ''],
				['1110123146', 17123, 17123, '正常', '2020-01-01', '2020-10-01', ''],
				['1110123166', 17123, 17123, '正常', '2020-08-01', '2020-09-01', ''],
				['1110123189', 17123, 17123, '正常', '2020-01-01', '2020-10-01', ''],
				['1110123134', 17123, 17123, '正常', '2020-08-01', '2020-09-01', ''],
				['1110123111', 17123, 17123, '正常', '2020-08-01', '2020-09-01', '']
			];
			var content = template(json_data_arr);

			console.log(content)

			//模版装载到dom节点上
			$("#table-debit").html(content)
		});
	</script>





	<script>
		Handlebars.registerHelper("debug", function (optionalValue) {


			if (optionalValue) {


				console.log("==========begin==========");

				console.log(optionalValue);

				console.log("========== end ==========");

			}


		});
		Handlebars.registerHelper('ifCond', function (v1, operator, v2, options) {

			switch (operator) {
				case '==':
					return (v1 == v2) ? options.fn(this) : options.inverse(this);
				case '===':
					return (v1 === v2) ? options.fn(this) : options.inverse(this);
				case '!=':
					return (v1 != v2) ? options.fn(this) : options.inverse(this);
				case '!==':
					return (v1 !== v2) ? options.fn(this) : options.inverse(this);
				case '<':
					return (v1 < v2) ? options.fn(this) : options.inverse(this);
				case '<=':
					return (v1 <= v2) ? options.fn(this) : options.inverse(this);
				case '>':
					return (v1 > v2) ? options.fn(this) : options.inverse(this);
				case '>=':
					return (v1 >= v2) ? options.fn(this) : options.inverse(this);
				case '&&':
					return (v1 && v2) ? options.fn(this) : options.inverse(this);
				case '||':
					return (v1 || v2) ? options.fn(this) : options.inverse(this);
				default:
					return options.inverse(this);
			}
		});
	</script>

</body>

</html>
